<template>
<!--  <a-modal title="onlyfile在线" width="80%" :modal-style="{ maxWidth: '800px' }" draggable v-model:visible="visible" @close="close">-->
    <div style="width:100%;height:720px;">
      <div id="offview2"></div>
    </div>
<!--  </a-modal>-->
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { FileItem } from '@/apis'
import type { FormInstance, Modal } from '@arco-design/web-vue'
import { DocumentEditor } from "@onlyoffice/document-editor-vue";

interface Props {
  fileInfo: FileItem
  onClose: Function
}
const props = withDefaults(defineProps<Props>(), {})

const visible = ref(false)
type Form = { name: string }
const form: Form = reactive({
  name: ''
})

// onMounted(() => {
//   new Player({
//     id: 'videoId',
//     url: props.data?.src ?? '',
//     lang: 'zh-cn',
//     autoplay: true,
//     closeVideoClick: true,
//     videoInit: true
//   })
// })
const cancel = () => {
  visible.value = false
  props.onClose && props.onClose()
}
// 模拟接口
const saveApi = (): Promise<boolean> => {
  return new Promise((resolve) =>
      setTimeout(() => {
        resolve(true)
      }, 2000)
  )
}

const FormRef = ref<FormInstance | null>(null)
const save: InstanceType<typeof Modal>['onBeforeOk'] = async () => {
  const flag = await FormRef.value?.validate()
  if (flag) return false
  return await saveApi()
}

//新增
const onDocumentReady = () => {
  console.log("Document is loaded");
}

const loadScript = () => new Promise((resolve, reject) => {
  console.log('进到这里4444。。。')
  const script = document.createElement('script');
  script.src = 'http://localhost:8101/office/web-apps/apps/api/documents/api.js';
  script.onload = resolve;
  script.onerror = reject;
  document.body.appendChild(script);
  console.log('进到这里555。。。')
})
onMounted(async () => {
  form.name = props.fileInfo?.name || ''
  visible.value = true
  try {
    console.log('进到这里2222。。。')
    await loadScript()
    console.log(window.DocsAPI)
    const config = {
      'document': {
        fileType: "docx",
        key: "Khirz6zTPdfd7",
        title: "Example Document Title.docx",
        url: "https://t.hitosea.com/single/file/OTU5NSw1Miw4MlBZV0ltcQ=="
      },
      'editorConfig': {
        'callbackUrl': 'URL for callback',
      },
    };
    console.log('进到这里2。。。')
    new window.DocsAPI.DocEditor('offview2', config);
  } catch (error) {
    console.error('Failed to load OnlyOffice script', error);
  }
})

</script>

<style lang="scss" scoped></style>
